<template>
  <div class="box-warp">
    <div class="mediaLeft">
      <div v-for="(item,index) in result" style="width:380px;float:left;padding-bottom:5px; overflow: hidden;" :key="index" :class="'item'+index">
        <div style="float:left;width:65%;">
          <img :src="item.logo" alt="" style="margin-top: 28px;cursor:pointer;" height="" @click="route(index)">
          <!-- <p style="margin-top:10px;font-size: 16px;font-weight:bolder;">{{item.mediaName}}</p> -->
          <p style="margin-top:25px;font-size:14px;">下载量：{{numLen(item.downloads+"")}}<img src="../../../assets/img/2-indexMedia/APP/3.png" alt="" style="margin-left: 3px;"></p>
          <p style="margin-top: 25px;font-size:14px;">
            <span style="font-weight:bold;">特点：</span>{{item.characteristic}}</p>
          <button style="width:87px;height: 32px;color:#fff;border-radius: 20px;background-color: #EE4041;margin-top:36px; font-weight:600; box-shadow: 0px 4px 19px #ed9191;" @click="route(index)">查看详情</button>
        </div>
        <div style="float:left;width:35%;position: relative;">
          <p style="height:36px;margin-bottom:19px">
            <img src="../../../assets/img/2-indexMedia/APP/2.png" alt="" style="margin-top: 28px;">
            <span style="position: absolute;top:33px;right:40px;font-size:14px;">{{item.lable1}}</span>
          </p>
          <p style="height:36px;margin-bottom:9px">
            <img src="../../../assets/img/2-indexMedia/APP/2.png" alt="" style="margin-top: 16px;">
            <span style="position: absolute;top:76px;right:40px;font-size:14px;">{{item.lable2}}</span>
          </p>
          <p style="height:36px;">
            <img src="../../../assets/img/2-indexMedia/APP/2.png" alt="" style="margin-top: 16px;">
            <span style="position: absolute;top:121px;right:40px;font-size:14px;">{{item.lable3}}</span>
          </p>
          <!-- <img :src="item.logo2" alt="" style="margin-top: 30px;" width="110px" height="50px"> -->
          <img :src="item.logo2" alt="" style="margin-top: 30px; margin-left:-60px; height:58px;"  >
        </div>
      </div>
    </div>
    <div class="box-shadow"></div>
    <div class="mediaRight">
      <div class="shortVideo">
        <div class="shortVideoContent">
          <div style="width:70%;float: left;">
            <p>人气排行榜<img src="../../../assets/img/2-indexMedia/media/5.png"></p>
            <button>APP矩阵</button>
          </div>
          <div style="width:30%;float: right">
            <!-- <img src="../../../assets/img/2-indexMedia/media/6.png" style="margin-top:27px;"> -->
            <img src="../../../assets/img/2-indexMedia/APP/11.png">
          </div>
        </div>
        <ul class="listNav">
          <li>APP
            <span class="line"></span>
          </li>
          <li>月活</li>
        </ul>
        <ul class="detailList">
          <li v-for="(detailLists,index) in resultList" :key="index" @click="routeDetail(index)" :class="{lihasborder:index==liborderindex,linoborder:index!=liborderindex}" @mouseover="hasborder(index)" @mouseout="hasnoborder(index)">
            <span><img :src="detailList[index]" alt=""></span>
            <span>{{b64DecodeUnicode(detailLists.media_name)}}</span>
            <span>{{numLen(detailLists.month_to_live+"")}}</span>
          </li>
        </ul>
        <button class="btnList" @click="$router.push({path:'/view2/hotMediaNav2',query:{type:'app'}})">查看更多&nbsp;&nbsp;></button>
      </div>
    </div>
  </div>
</template>
<script>
const img12 = require('../../../assets/img/2-indexMedia/media/12.png')
const img13 = require('../../../assets/img/2-indexMedia/media/13.png')
const img14 = require('../../../assets/img/2-indexMedia/media/14.png')
const img15 = require('../../../assets/img/2-indexMedia/media/15.png')
const img16 = require('../../../assets/img/2-indexMedia/media/16.png')
const img17 = require('../../../assets/img/2-indexMedia/media/17.png')
const img18 = require('../../../assets/img/2-indexMedia/media/18.png')
const img19 = require('../../../assets/img/2-indexMedia/media/19.png')
const img20 = require('../../../assets/img/2-indexMedia/media/20.png')
const img21 = require('../../../assets/img/2-indexMedia/media/21.png')
import moduleName from '../../../assets/css/mediaCommon.css'
export default {
  data() {
    return {
      detailList: [
        img12,
        img13,
        img14,
        img15,
        img16,
        img17,
        img18,
        img19,
        img20,
        img21
      ],
      args: {
        page: 1,
        limit: 4,
        type: 'APP效果类',
        homeShowFlag: 1
      },
      //   列表页参数
      args2: {
        page: 1,
        limit: 10,
        type: 'app'
      },
      result: '',
      resultList: '',
      liborderindex: 0
    }
  },
  methods: {
    route(index) {
      this.$router.push({
        path: '/view2/appRect',
        query: { type: 'APP效果类', id: this.result[index].id }
      })
    },
    routeDetail(index) {
      this.$router.push({
        path: '/view2/shortVideoDetail',
        query: { id: this.resultList[index].id }
      })
    },
    hasborder(index) {
      this.liborderindex = index
    },
    hasnoborder(index) {
      this.liborderindex = 0
    }
  },
  mounted() {
    this.$ajax
      .post(this.Ipurl + 'advertisingInformation/selectPage', this.args)
      .then(res => {
        this.result = res.data.dataInfo.records
      })
    this.$ajax
      .post(this.Ipurl + 'popularMedia/getRankingByType' + '?type=app')
      .then(res => {
        this.resultList = res.data.dataInfo
      })
  }
}
</script>
<style scoped>
.mediaLeft {
  margin-top: 15px;
}
.box-warp {
  position: relative;
}
.box-shadow {
  width: 20px;
  height: 596px;
  position: absolute;
  top: -38px;
  -moz-box-shadow: 3px 0px 6px #d4d4d4;
  -webkit-box-shadow: 3px 0px 6px #d4d4d4;
  box-shadow: 3px 0px 6px #d4d4d4;
  left: 74%;
  z-index: -1;
}
.detailList li {
  height: 39px;
  cursor: pointer;
}
ul > li.lihasborder {
  background: #fff;
}
ul > li.linoborder {
  background: #f8f9fd;
}
.item0,
.item2 {
  width: 90%;
  padding-right: 10px;
  /* border-right: 1px solid #eee; */
  border-right: 1px dashed #d4d4d4;
}
.item2,
.item3 {
  width: 90%;
  padding-right: 10px;
  /* border-top: 1px solid #eee; */
  border-top: 1px dashed #d4d4d4;
}
.listNav > li:nth-child(1) {
  position: relative;
}
.line {
  width: 1px;
  height: 15px;
  background: #fff;
  position: absolute;
  right: 0px;
  top: 7.5px;
}
</style>
